import React from "react";
import PropTypes from "prop-types";
import { Row, Icon, Col } from "antd";
import { withRouter } from "react-router";
import "./index.scss";

class StatusBar extends React.Component {

  handle_goback() {
    const { history } = this.props;
    history.goBack();
  }

  handle_goForward() {
    const { history } = this.props;
    history.goForward();
  }

  render() {
    const { names, disable_backward, disable_forword, history } = this.props;
    return (
      <Row className="com_status_bar" type="flex" justify="start" align="middle" >
        {!disable_backward && <Icon className="com_status_bar_history" onClick={this.handle_goback.bind(this)} type="left" style={{ marginLeft: -30 }} />}
        {!disable_forword && <Icon className="com_status_bar_history" onClick={this.handle_goForward.bind(this)} type="right" />}
        <h4>{names[history.location.pathname]}</h4>
      </Row>
    )
  }
}

StatusBar.propTypes = {
  disable_backward: PropTypes.bool,   // 是否渲染返回Icon
  disable_forword: PropTypes.bool,    // 是否渲染前进Icon

  names: PropTypes.objectOf(PropTypes.string),  // {"url1":"name1", "url2":"name2"}
}

StatusBar.defaultProps = {
  disable_backward: false,
  disable_forword: true,
  names: {}
}

export default withRouter(StatusBar);
